body{
  margin:0;
  font-family:"微软雅黑";
}
ul,li{
  margin:0;
  padding:0;
  list-style:none;
}
input{
  outline:none;
  cursor:pointer;
}
.clearFix:after{
  display:block;
  content:"";
  clear:both;
  height:0;
}
.clearFix{
  zoom:1;
}

.warp{
  width:348px;
  box-shadow:2px 2px 10px #6789ad;
  margin:10px;
  background:url(https://s1.ax1x.com/2018/10/22/iDwReO.png) no-repeat;
  padding:100px 76px 50px;
}
.searchIpt{
  position:relative;
  width:336px;
  border:1px solid #3736ae;
  padding:5px;
  border-radius:24px;
  background:#e4e4fe;
}
.searchIpt input{
  line-height:34px;
  border-radius:18px;
}
.searchIpt input:nth-of-type(1){
  float:left;
  width:228px;
  padding-left:40px;
  border:1px solid #c9c9d5;
  background:#d9d9e2;
}
.searchIpt input:nth-of-type(2){
  float:right;
  width:58px;
  height:36px;
  border:1px solid #fd635e;
  background:#fd635e;
}
.searchIpt span{
  position:absolute;
  background:url(https://s1.ax1x.com/2018/10/22/iDwcy6.png) no-repeat;
  width:23px;
  height:23px;
  top:12px;
  left:15px;
}
.searchIpt input:nth-of-type(1):focus{
  background:#fff;
  border-color:#fd635e;
}
.list{
  margin-top:9px;
}
.list li{
  margin:3px 0;
  color:#333;
  line-height:30px;
  padding-left:16px;
  width:270px;
  box-sizing:border-box;
  border-radius:14px;
}
.list li.active,.list li:hover{
  color:#fff;
  background:#fd635e;
  cursor:pointer;
}